<template>
  <el-dialog
    :title="!dataForm.shopid ? '新增' : '修改'"
    :close-on-click-modal="false"
    class="full_screen_dialog "
    width="95%"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
      <el-row :gutter="50">
        <el-col :span="12">
          <el-row :gutter="10">
            <el-col>
              <el-form-item label="联系QQ" prop="shopqq">
                <el-input v-model="dataForm.shopqq" placeholder="该账号为店铺管理账号，一旦申请则不可修改" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col>
              <el-form-item label="店铺编号" prop="shopsn">
                <el-input v-model="dataForm.shopsn" placeholder="为空则有系统自动生成 如：S00000001" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col>
              <el-form-item label="公司名称" prop="shopcompany">
                <el-input v-model="dataForm.shopcompany" placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            :on-success="handleAvatarSuccess"
            :action="uploadUrl"
            :with-credentials="true"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="dataForm.shopimg" :src="dataForm.shopimgFullpath" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-col>
        <el-col :span="6" />
      </el-row>
      <el-row :gutter="40">
        <el-col :span="16">
          <el-form-item label="公司所在地" prop="areaids">
            <el-cascader
              v-model="dataForm.areaids"
              style="width: 100%"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="16">
          <el-form-item label="公司详细地址" prop="shopaddress">
            <el-input v-model="dataForm.shopaddress" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="16">
          <el-form-item label="公司电话" prop="shoptel">
            <el-input v-model="dataForm.shoptel" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="16">
          <el-form-item label="紧急联系人" prop="shopkeeper">
            <el-input v-model="dataForm.shopkeeper" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="16">
          <el-form-item label="紧急联系人手机" prop="telephone">
            <el-input v-model="dataForm.telephone" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col>
        <span class="dialog-footer" style="display: block;text-align: right;">
          <el-button size="mini" icon="el-icon-close" @click="dataFormCancel()">取消</el-button>
          <el-button size="mini" icon="el-icon-check" type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { regionData } from 'element-china-area-data'
import { isMobile, isPhone } from '@/utils/validate'
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error('电话格式错误'))
      } else {
        callback()
      }
    }
    var validateTelephone = (rule, value, callback) => {
      if (!isMobile(value) && (!isPhone(value))) {
        callback(new Error('公司电话格式错误'))
      } else {
        callback()
      }
    }
    return {
      options: regionData,
      visible: false,
      uploadUrl: this.$http.adornUrl(`/system/file/uploadShopPhoto`),
      dataForm: {
        shopid: '',
        areaids: [],
        user: '',
        shopsn: '',
        userid: '',
        areaidpath: '',
        areaid: '',
        isself: '',
        shopname: '',
        shopkeeper: '',
        telephone: '',
        shopcompany: '',
        shopimg: '',
        shopimgFullpath: '',
        shoptel: '',
        shopqq: '',
        shopwangwang: '',
        shopaddress: '',
        bankid: '',
        bankno: '',
        bankusername: '',
        isinvoice: '',
        invoiceremarks: '',
        servicestarttime: '',
        serviceendtime: '',
        freight: '',
        shopative: '',
        shopstatus: '',
        statusdesc: '',
        dataflag: '',
        createtime: '',
        shopmoney: '',
        lockmoney: '',
        nosettledordernum: '',
        nosettledorderfee: '',
        paymentmoney: '',
        bankareaid: '',
        bankareaidpath: '',
        applystatus: '',
        applydesc: '',
        applytime: '',
        applystep: '',
        shopnotice: '',
        rechargemoney: '',
        longitude: '',
        latitude: '',
        maplevel: ''
      },
      dataRule: {
        user: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        shopsn: [
          { required: true, message: '店铺编号不能为空', trigger: 'blur' }
        ],
        areaids: [
          { required: true, message: '公司所在地不能为空', trigger: 'blur' }
        ],
        isself: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopname: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopkeeper: [
          { required: true, message: '紧急联系人不能为空', trigger: 'blur' }
        ],
        telephone: [
          { required: true, message: '紧急联系人手机不能为空', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        shopcompany: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ],
        shopimg: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shoptel: [
          { required: true, message: '公司电话不能为空', trigger: 'blur' },
          { validator: validateTelephone, trigger: 'blur' }
        ],
        shopqq: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopwangwang: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopaddress: [
          { required: true, message: '公司详细地址不能为空', trigger: 'blur' }
        ],
        bankid: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        bankno: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        bankusername: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        isinvoice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        invoiceremarks: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        servicestarttime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        serviceendtime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        freight: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopative: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopstatus: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        statusdesc: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        dataflag: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        createtime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopmoney: [
          { required: true, message: '公司名称不能为空', trigger: 'blur' }
        ],
        lockmoney: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        nosettledordernum: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        nosettledorderfee: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        paymentmoney: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        bankareaid: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        bankareaidpath: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        applystatus: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        applydesc: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        applytime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        applystep: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shopnotice: [
          { required: true, message: '店铺公告不能为空', trigger: 'blur' }
        ],
        rechargemoney: [
          { required: true, message: '充值金额不能为空', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        maplevel: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === 0 && response.file) {
        this.dataForm.shopimg = response.file.sysFileEncryptionName
        this.dataForm.shopimgFullpath = this.$http.adornUrl(`/system/file/downloadShopPhoto/${response.file.sysFileEncryptionName}`)
      } else {
        this.$message.error(response.msg)
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/shop/shops/update`),
            method: 'post',
            data: this.$http.adornData({
              'shopid': this.dataForm.shopid,
              'shopsn': this.dataForm.shopsn,
              'shopcompany': this.dataForm.shopcompany,
              'areaids': this.dataForm.areaids,
              'shopaddress': this.dataForm.shopaddress,
              'shoptel': this.dataForm.shoptel,
              'shopkeeper': this.dataForm.shopkeeper,
              'telephone': this.dataForm.telephone,
              'shopimg': this.dataForm.shopimg,
              'shopqq': this.dataForm.shopqq
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
              this.$refs['dataForm'].resetFields()
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    init(id) {
      this.dataForm.shopid = id || 0
      this.visible = true
      if (this.dataForm.shopid) {
        this.$http({
          url: this.$http.adornUrl(`/shop/shops/info/${this.dataForm.shopid}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataForm.telephone = data.shop.telephone
            this.dataForm.shoptel = data.shop.shoptel
            this.dataForm.shopsn = data.shop.shopsn
            this.dataForm.user = data.shop.user
            this.dataForm.shopcompany = data.shop.shopcompany
            this.dataForm.shopkeeper = data.shop.shopkeeper
            this.dataForm.shopaddress = data.shop.shopaddress
            this.dataForm.shopimg = data.shop.shopimg
            this.dataForm.shopqq = data.shop.shopqq
            if (data.shop.areaidpath != null) {
              this.dataForm.areaids = data.shop.areaidpath.split('_')
            }
            if (data.shop.shopimg) {
              this.dataForm.shopimgFullpath = this.$http.adornUrl(`/system/file/downloadShopPhoto/${this.dataForm.shopimg}`)
            }
          }
        })
      }
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
  .unbuttom{
    margin-bottom: 0px !important
  }
</style>
